<template>
  <div class="UploadResult">
    <div class="Upload_btn" :class="{'resultRed':no,'resultGreen':ok}">
      <div class="uploadIcon" :class="{'resultRed_bg':no,'resultGreen_bg':ok}">
        <img src="../assets/images/UploadResult_icon.png" alt="">
        <i v-show="no" class="iconfont icon-guanbi resultRed_bg"></i>
        <i v-show="ok" class="iconfont icon-queding resultGreen_bg"></i>
      </div>
      <p><strong>{{ promptTitle }}</strong><br/> <span v-show="no">{{ prompt }}</span></p>
    </div>
    <ul ref="from">
      <li><label>姓名</label> <input v-model="name" type="text" placeholder="输入姓名" value="name"></li>
      <li><label>证件号</label> <input v-model="number" type="number" placeholder="输入证件号" value="number"></li>
    </ul>
    <a v-show="no" @click="$router.push('/AuthenticationUpload')">重新认证</a>
  </div>
</template>
<script>
  export default{
    name:'UploadResult',
    data(){
      return{
        no:true,
        ok:false,
        promptTitle:'认证失败',
        prompt:'证件姓名和号码不匹配，请重新认证',
        name:'',
        number:''
      }
    },
    mounted(){
        var from = this.$refs.from;
        from.scrollIntoView(true);
    }
  }
</script>
<style scoped>
  .UploadResult{position:relative;margin-bottom: 30%;}
  .Upload_btn{height:200px;text-align: center;background: #fff;margin-bottom: .6rem;overflow: hidden;}
  .resultRed{color: #ff496b;}
  .resultGreen{color: #3bb054;}
  .Upload_btn p{font-size: .9rem;}
  .Upload_btn p strong{font-size: 1.2rem;display: inline-block;padding:4% 0 2%;font-weight: 600;}
  .uploadIcon{width:125px;margin:16% auto 0;position:relative;overflow: hidden;font-size: 0;overflow: hidden;}
  .resultRed_bg{background: #ff496b;}
  .resultGreen_bg{background: #3bb054;}
  .uploadIcon i{position:absolute;left:50%;top:50%;font-size: .9rem;margin:.11rem 0 0 -1.8rem;border:1px #fff solid;border-radius: 50%;text-align: center;display: inline-block;width:1.2rem;height:1.2rem;line-height:1.3rem;color:#fff;}
  .UploadResult li{background: #fff;padding:1.2rem 1rem;line-height:18px;margin-bottom: 1px;}
  .UploadResult li label{width:20%;display: inline-block;vertical-align: middle;}
  .UploadResult li input{width:78%;position:relative;right:-0rem;text-align: right;background: #fff;}
  .UploadResult a{text-align: center;padding:4% 0;color:#fff;font-size: 1.1rem;background: #ffa200;display: block;width:100%;position: fixed;bottom:0;}
</style>
